<template>
    <div class="boxContentCss">
        <el-form ref="formRef" :model="form" label-position="right" label-width="auto">
            <EdCreateCard title="装修详情">
                <template #back>
                    <el-button style="margin-right: 10px" class="ed-button ed_black-bottom" v-if="form.status == 0" v-has="'property:renovation:edit'" @click="edit()"><svg-icon icon-class="rentEdit"/>编辑</el-button>
                    <div class="createBack" style="margin-top:8px" @click="$utilsSet.goBack($router)" >
                        <svg-icon icon-class="back" /> 返回
                    </div>
                </template>
                <div class="zh_flex">
                    <div class="left">
                        <el-row class="width-100">
                            <el-col :span="12">
                                <el-form-item label="状态：">
                                     <el-button class="ed-table-bottom ed_7_border" v-if="form.status == 0">装修申报</el-button>
                                    <el-button class="ed-table-bottom ed_4_border" v-if="form.status == 1">装修确认</el-button>
                                    <el-button class="ed-table-bottom ed_2_border" v-if="form.status == 1">完工通知</el-button>
                                    <el-button class="ed-table-bottom ed_7_border" v-if="form.status == 3">完工确认</el-button> 
                                    <el-button class="ed-table-bottom ed_6_border" v-if="form.status == 4">取消申报</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="房号：">
                                    <span class="textStyle">{{form.address || '-'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="width-100">
                            <el-col :span="12">
                                <el-form-item label="联系人:">
                                    <span class="textStyle">{{form.contactsName || '-'}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="联系电话:">
                                    <span class="textStyle">{{form.contactsPhone || '17678952345'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="width-100">
                            <el-col :span="12">
                                <el-form-item label="施工时间:">
                                    <span class="textStyle">{{form.startTime +'~'+ form.endTime || '-'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="width-100">
                            <el-col :span="24">
                                <el-form-item label="施工内容:">
                                    <span class="textStyle">{{form.details || '-'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="width-100" v-if="form.status == 4" >
                            <el-col :span="24">
                                <el-form-item label="取消原因:">
                                    <span class="textStyle">{{form.reason || '-'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="width-100" v-if="form.status ==1 || form.status ==3">
                            <el-col :span="12">
                                <el-form-item label="垃圾清理运费"  prop="cleanFee" :rules="$validate.validates({required:true,msg:'垃圾清理运费不能为空'})">
                                    <span class="textStyle">{{form.cleanFee+'元' || '-'}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="装修保证金"  prop="earnestMoney" :rules="$validate.validates({required:true,msg:'垃圾清理运费不能为空'})">
                                    <span class="textStyle">{{form.earnestMoney+'元' || '-'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row  v-if="form.status ==0">
                            <el-col :span="8">
                                <el-form-item label="垃圾清理运费"  prop="cleanFee" :rules="$validate.validates({required:true,msg:'垃圾清理运费不能为空'})">
                                    <el-input class="flex-input phoneStyle" v-model="form.cleanFee" placeholder="垃圾清理运费">
                                        <span slot="suffix">元</span>
                                    </el-input>
                                </el-form-item>
                            </el-col>  
                            <el-col :span="4"><el-form-item></el-form-item></el-col>
                            <el-col :span="8">  
                                <el-form-item label="装修保证金"  prop="earnestMoney" :rules="$validate.validates({required:true,msg:'装修保证金不能为空'})">
                                    <el-input class="flex-input phoneStyle" v-model="form.earnestMoney" placeholder="装修保证金">
                                        <span slot="suffix">元</span>
                                    </el-input>
                                </el-form-item>
                            </el-col> 
                            <el-col :span="4"><el-form-item></el-form-item></el-col>   
                        </el-row>
                        <el-row v-if="form.status ==1">
                            <el-col :span="8">
                                <el-form-item label="退还保证金"  prop="refundMoney" :rules="$validate.validates({required:true,msg:'退还保证金不能为空'})">
                                    <el-input class="flex-input phoneStyle" v-model="form.refundMoney" placeholder="退还保证金">
                                        <span slot="suffix">元</span>
                                    </el-input>
                                </el-form-item>
                            </el-col>  
                        </el-row>    
                        <el-row v-if="form.status ==3">
                            <el-col :span="12">
                                <el-form-item label="退还保证金"  prop="refundMoney" :rules="$validate.validates({required:true,msg:'退还保证金不能为空'})">
                                    <span class="textStyle">{{form.refundMoney+'元' || '-'}}</span>
                                </el-form-item>
                            </el-col>  
                        </el-row> 
                        <el-row v-if="form.status ==3">
                            <el-col :span="24">
                                <el-form-item label="检查图片:">
                                    <div class="textStyle">
                                        <el-image style="width:120px;height:120px;margin-right: 20px;" v-for="item in form.checkPics" :key="item" :src="item" :preview-src-list="form.checkPics"></el-image>
                                    </div>
                                    <!-- <div v-else>-</div> -->
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row  v-if="form.status ==1">
                            <el-col :span="24">
                                <el-form-item label="图片" prop="checkPics">
                                        <el-upload
                                            accept=".jpg, .jpeg, .png, .gif"
                                            :action="action"
                                            :headers="headers"
                                            list-type="picture-card"
                                            :limit="5"
                                            :multiple="true"
                                            :file-list="fileList"
                                            :before-upload="beforeImgUpload"
                                            :on-preview="handleImgPreview"
                                            :on-success="handleImgSuccess"
                                            :on-remove="handleImgRemove">
                                            <i class="el-icon-plus"></i>
                                        </el-upload>
                                    <el-dialog :visible.sync="dialogVisible">
                                        <img width="100%" :src="dialogImageUrl" alt="">
                                    </el-dialog>
                                    <p class="labelFont">请上传2M以内的图片，建议上传图片大小430px*430px,格式为jpeg、jpg、png、gif的图片，至多5张</p>
                                </el-form-item>
                            </el-col>  
                        </el-row>    
                        <el-row>
                            <el-col :span="18" v-if="form.status ==1">  
                                <el-form-item label="备注"  prop="comment">
                                    <el-input placeholder="请输入备注" class="flex-input" type="textarea" v-model="form.comment" :rows="6"  maxlength="200" show-word-limit></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="right">
                        <div class="right_title">进度跟踪</div>
                        <div>
                            <el-timeline :reverse="reverse">
                                <el-timeline-item v-for="(activity, index) in activities" :key="index" color="#EED096" size="large">
                                    <div class="timeline_time">{{activity.scheduleTime}}</div>
                                    <div class="timeline_content">{{activity.status}}</div>
                                    <!-- <div class="timeline_img">
                                        <el-image v-for="(item, index) in activity.images" :key="index"
                                                :src="item" :preview-src-list="[item]" fit="cover">
                                        </el-image>
                                    </div> -->
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                    </div>
                </div>
            </EdCreateCard>
            <el-form-item class="form_btns">
                <el-button class="ed-button ed_black-bottom" @click="onSubmit('formRef')" :loading="disabled">确定</el-button>
                <el-button class="ed-button ed_white_bottom" @click="$utilsSet.goBack($router)">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import EdUpload from 'src/components/EdUpload.vue'
    import {getToken} from 'src/utils/auth'
    import { defineComponent } from 'vue'
    import * as api from "./api";
    export default defineComponent({
        name: "renovationInfo",
        components: { EdCreateCard, EdUpload},
        data(){
            return{
                form:{
                    id:this.$route.query.id,
                    status:"",
                    address:'',
                    contactsName:'',
                    contactsPhone:'',
                    createTime:'',
                    startTime:'',
                    details:'',
                    cleanFee:'',
                    earnestMoney:'',
                    refundMoney:'',
                    checkPics:[],
                    comment:''
                },
                disabled: false,
                edUploadForm:{
                    widthClass160:true,
                    sizeTips:false,
                    list:[],
                    limit:5
                },
                activities:[],
                reverse:false,
                action: '',
                headers:{
                    RdAuthorization: getToken()
                },
                dialogImageUrl: '',
                fileList: [],
                dialogVisible:false
            }
        },
        activated(){
            this.action = this.$baseApi + "/file/upload";
            this.renovationInfo()
        },
        deactivated(){
            this.form = {},
            this.$refs['formRef'].resetFields()
        },
        methods:{
            // 查看详情的接口
            renovationInfo(){
                api.info({id:this.$route.query.id}).then(response => {
                    if(response.success) {
                        this.form = {...response.data}
                        this.form.checkPics = response.data.checkPics || []
                        this.activities = response.data.trackProgressVOS
                    }
                })
            },
            onSubmit(formName){
                 this.$refs[formName].validate((valid) => {
                    if(valid){
                        if(this.$route.query.id && this.$route.query.status==0){
                            // 装修申报状态小的新增，传id，传垃圾清运费，装修保证金
                            let decorationList = {
                                id:this.$route.query.id,
                                cleanFee:this.form.cleanFee,
                                earnestMoney:this.form.earnestMoney,
                            }
                            api.DecotationAdd(decorationList).then(response => {
                                if(response.success) {
                                    this.disabled = false;
                                    this.$message.success({
                                        message: '修改成功',
                                        center: true,
                                        duration: 2000,
                                    });
                                    window.setTimeout(() => {
                                        this.$utilsSet.goBack(this.$router);
                                    }, 600)
                                } else {
                                    this.disabled = false
                                }
                            }).catch(()=>{
                                this.disabled = false
                            })
                            // 装修确认传给后端的值
                        } else if(this.$route.query.id && this.$route.query.status==1){
                            let confirmList={
                                id:this.$route.query.id,
                                refundMoney:this.form.refundMoney,
                                checkPics:this.form.checkPics,
                                comment:this.form.comment
                            }
                            api.DecotationAdd(confirmList).then(response => {
                                if(response.success) {
                                    this.disabled = false;
                                    this.$message.success({
                                        message: '修改成功',
                                        center: true,
                                        duration: 2000,
                                    });
                                    window.setTimeout(() => {
                                        this.$utilsSet.goBack(this.$router);
                                    }, 600)
                                } else {
                                    this.disabled = false
                                }
                            }).catch(()=>{
                                this.disabled = false
                            })
                        }
                        
                    }
                })
              
            },
            edit(){
                this.$router.push({
                    path: '/property/renovation/edit',
                    query: {id: this.$route.query.id,status:this.$route.query.status},
                })
            },
            beforeImgUpload(file){
                // console.log('before-->', file)
                const fileType = file.name.split('.');
                const fileDate = fileType.slice(-1);
                if (['jpeg', 'jpg', 'png', 'gif'].indexOf(fileDate[0]) < 0) {
                    this.$message.error('仅支持格式：.jpeg、.jpg、.png、.gif!');
                    return false
                }
                const isLt5M = file.size / 1024 /1024 < 2;
                if (!isLt5M) {
                    return this.$message.error('上传文件大小不能超过 2MB!');
                }
                // return isLt5M;
                return true;
            },
            // 图片 上传成功
            handleImgSuccess(response, file, fileList){
                let res = file.response;
                if(res&&res.success == true){
                    console.log('res',this.form);
                    this.form.checkPics.push(res.data)
                    // this.$refs['formRef'].validate()
                }
            },
            // 图片 删除
            handleImgRemove(file, fileList) {
                this.form.checkPics = fileList&&fileList.map(v=>{
                    return v['url']
                })
            },
            // 图片 预览
            handleImgPreview(file) {
                console.log('file',file);
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
        },
        
    })
</script>

<style scoped lang="scss">
:deep .batchHandleDialog{
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        .el-dialog__body{
            padding-left: 75px;
        }
        .header{
            color: #1E1E1E;
            margin-bottom: 30px;
        }
        .main{
            color: #606266;
        }
}
   :deep .zh_flex{
        padding: 16px !important;
        font-family: 'Noto Sans SC';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 28px;
        .left{
            flex: 2;
            border-right: 1px solid #e5e7eb;
            // border: 1px solid #e5e7eb;
            padding: 0 40px 5px 20px;
        }
        .right{
            flex: 1;
            padding: 5px 20px;
        }
    }
</style>